<template>
  <q-layout view="lHh Lpr lFf">    
    <q-layout-header class="no-shadow">
      <q-toolbar color="primary">
        <q-btn flat dense round v-if="$api.account.localAccount()"
          @click="$router.go(-1)">
          <q-icon name="mdi-chevron-left" />
        </q-btn>

        <q-toolbar-title :class="$q.platform.is.mobile?'text-center':'text-left'">
          {{ pageTitle }}
        </q-toolbar-title>
      </q-toolbar>
    </q-layout-header>
    <q-page-container>
      <q-page class="row gutter-md justify-center">
        <div v-if="$api.account.localAccount()"
          style="border:1px solid #ddd;background-color:white;position:fixed;text-align:center;right:10px;top:180px;z-index:999;width:128px;padding:0;margin:0;">
          <img id="barcode" :src="barcode" style="width:100%"/>
          长按二维码<br/>“发送给朋友”
        </div>

        <q-inner-loading visible v-if="model.id == 0">
          <q-spinner-gears size="50px" color="primary"></q-spinner-gears>
          <b class="text-primary">数据加载中...</b>
        </q-inner-loading>
        <div class="q-ma-lg" v-if="alert">尚未添加任何中奖用户</div>

        <q-tabs class="col-xs-12 col-md-10" align="justify" inverted v-if="model.id>0&&list.length>0">
          <!-- 选项卡 - 注意slot="title" -->
          <q-tab slot="title" label="全部"  @select="select(null)" default />
          <q-tab slot="title" label="未签到"  @select="select(0)" :count="uncheckedCount"  />
          <q-tab slot="title" label="已签到"  @select="select(1)"  :count="checkedCount" />
          <q-tab slot="title" label="已拉黑"  @select="select(-1)" />
          <!-- 目标 -->
          <q-list separator class="q-py-none" :no-border="$q.platform.is.mobile">
            <q-alert v-if="readonly" type="warning" class="full-width no-shadow no-border">
                {{warning}}
            </q-alert>
            <q-item class="q-pa-none">
              <q-search icon="mdi-account-search" class="full-width no-shadow" :value="query" 
                  inverted-light color="grey-2"
                placeholder="通过昵称及手机号搜索" autofocus="true"
                @input="filterUser" @clear="filterUser('')" clearable/>
            </q-item>
            <q-item v-for="(item) in filteredList" :key="'user_'+item.id">
              <q-item-main>
                <q-item-tile label>
                  <a :href="'https://www.douban.com/people/'+item.id+'/'" target="_blank">{{item.name}}</a>
                  <b v-if="item.confirmStatus=='leave'" style="color:orange">(已请假)</b>
                  <b v-if="item.confirmStatus==''" style="color:red">(未确认)</b>
                </q-item-tile>
                <q-item-tile sublabel>{{item.phone == '0' ? '' : item.phone}}</q-item-tile>
              </q-item-main>
              <q-item-side right v-if="!readonly">
                <q-btn dense label="签到" color="primary" class="q-mr-sm q-px-sm"
                    v-if="item.checked==0" @click="checkPlayer(item)"/>

                <!-- seat-map -->
                <template v-if="model.hallName">
                  <q-btn dense outline class="q-mr-sm q-px-sm"
                    :label="item.seat?item.seat:'未选座'" 
                    :color="item.seat?'secondary':'black'" 
                    v-if="item.checked>0" @click="viewSeat(item)"/>
                </template>
                
                <q-btn-dropdown dense outline label="拉黑" color="black" v-if="item.checked==0">
                  <!-- 下拉内容 -->
                  <q-list separator class="q-pa-none" style="min-width:120px;">
                    <q-item class="q-pa-none">
                      <q-btn class="full-width" dense flat v-close-overlay
                          label="临时请假(30天)" @click="blackPlayer(item, '临时请假', 30)" />
                    </q-item>
                    <q-item class="q-pa-none">
                      <q-btn class="full-width" dense flat v-close-overlay
                          label="无故迟到(30天)" @click="blackPlayer(item, '无故迟到', 30)" />
                    </q-item>
                    <q-item class="q-pa-none">
                      <q-btn class="full-width" dense flat v-close-overlay
                          label="无故缺席(90天)" @click="blackPlayer(item, '无故缺席', 90)" />
                    </q-item>
                    <q-item class="q-pa-none">
                      <q-btn class="full-width" dense flat v-close-overlay
                          label="私下转票(90天)" @click="blackPlayer(item, '私下转票', 90)" />
                    </q-item>
                    <q-item class="q-pa-none">
                      <q-btn class="full-width" dense flat v-close-overlay
                          label="态度恶劣(90天)" @click="blackPlayer(item, '态度恶劣', 90)"/>
                    </q-item>
                    <q-item class="q-pa-none">
                      <q-btn class="full-width" dense flat v-close-overlay
                          label="违反礼仪(永久)"  @click="blackPlayer(item, '严重违规', 10000)"/>
                    </q-item>
                  </q-list>
                </q-btn-dropdown>
                <q-btn-dropdown dense outline icon="mdi-check-circle" 
                      :label="item.checked>0?'已签到':'已拉黑'" 
                      :color="item.checked>0?'primary':'black'" v-if="item.checked!=0">
                  <!-- 下拉内容 -->
                  <q-list separator class="q-pa-none" style="min-width:100px;">
                    <q-item class="q-pa-none">
                      <q-btn icon="mdi-restore" class="full-width" dense flat 
                          :color="item.checked>0?'primary':'black'" v-close-overlay
                          label="还原" @click="restorePlayer(item)" />
                    </q-item>
                  </q-list>
                </q-btn-dropdown> 
              </q-item-side>
            </q-item>
          </q-list>
        </q-tabs>

        <!-- modal -->
        <q-modal v-model="modal" :position="$q.platform.is.mobile?'':'right'" :maximized="$q.platform.is.mobile">      
          <q-toolbar color="primary">
            <q-toolbar-title>签到选座</q-toolbar-title>
            <q-btn flat round dense icon="mdi-close" @click="modal=false" />
          </q-toolbar>
          <my-seat-map v-if="seats" :map="seats" :selected="seats.selected"/>
          
            <div class="q-pa-md">
              <q-btn color="primary" label="确定" class="full-width" 
                :loading="loading"
                @click="selectSeat"  />
          </div>
        </q-modal>
      </q-page>
    </q-page-container>
  </q-layout>
  
</template>

<script>
import QRCode from 'qrcode'
import MySeatMap from "../components/MySeatMap.vue"

export default {
  name: 'PageAnonEventCheck',
  components: { MySeatMap },
  data () {
    return {
      modal: false,
      seats: false,
      seatUser: false,
      loading: false,

      barcode:'',
      warning:'',
      pageTitle:'活动签到',
      selected: null,
      readonly: false,
      alert: false,
      query: '',
      model:{id:0,step:0,hallName:false},
      list:[]
    }
  },
  mounted() {
    let me = this;
    me.refreshPlayers();
    me.loadEventPlay();
    if(me.$api.account.localAccount()) {
      QRCode.toDataURL(window.location.href, function (err, url) {
        me.barcode = url;
        //console.log(url);
      })
    }
  },
  methods: {
    select(type) {
      this.selected = type;
    },
    filterUser(val) {
      this.query = val;
    },
    refreshPlayers() {
      let me = this;
      let eventId = me.$route.params.id;
      this.$api.anonParty.loadEventPlayers(eventId, res=>{
        me.list = res.data.model;
        me.alert = (me.list.length == 0);
      });
    },
    loadEventPlay() {
      let me = this;
      let eventId = me.$route.params.id;
      this.$api.anonParty.loadEvent(eventId, res=>{
        me.model = res.data.model;
        me.pageTitle = me.model.city + '：《' + me.model.movieName + '》';
        // check readonly
        if(me.model.step != 3) {
          // only check step
          me.readonly = true;
          let dtStr = me.model.date.replace('-','/').replace('-','/') + ' ' + me.model.time;
          let begin = new Date(dtStr);
          let end = new Date(dtStr);
          let hour = begin.getHours();
          begin.setHours(hour - 4);
          end.setHours(hour + 4);
          if(new Date()>end) {
            me.warning = '签到已结束';
          } else {
            me.warning = '签到时间：' + (begin.getMonth()+1) + '月' + begin.getDate() + '日 ' + 
              begin.toTimeString().substring(0,5) + ' 至 ' + end.toTimeString().substring(0,5);
          }
        } else {
          me.readonly = false;
        }
      });
    },
    blackPlayer(user, type, days) {
      let me = this;
      let eventId = me.$route.params.id;
      let cause = me.model.movieName + type;
      this.$api.anonParty.blackPlayer(eventId, user, cause, days, res=>{
        user.checked = -1;
        user.note = type;
        me.query = '';
      });
    },
    checkPlayer(user) {
      let me = this;
      let eventId = me.$route.params.id;
      this.$api.anonParty.checkPlayer(eventId, user, res=>{
        user.checked = 1;
        user.note = res.data.model.note;
        me.query = '';
      });
      // select seat
        if(me.model.hallName) {
          me.viewSeat(user);
        }
    },
    restorePlayer(user) {
      let me = this;
      let eventId = me.$route.params.id;
      this.$api.anonParty.restorePlayer(eventId, user, res=>{
        user.checked = 0;
        user.note = '';
      });
    },
    viewSeat(user) {
      let me = this;
      let eventId = me.$route.params.id;
      this.$api.anonParty.loadUserEventSeat(eventId, user, res=>{
        if(res.data.model) {
          me.seats = res.data.model
          me.seatUser = user;
          me.modal = true;          
        }
      });
    },
    selectSeat() {
      let me = this;
      let eventId = me.$route.params.id;
      if(me.seats.selected.length != 1) {
          me.$q.notify({message: '请为用户选择1个座位！'});
        return;
      }

      let seatName = me.seats.selected[0];
      if(seatName == me.seatUser.seat) {
        me.modal = false; // no op
        return 
      } else {
        me.loading = true;
        me.$api.anonParty.selectUserEventSeat(eventId, me.seatUser, seatName, res=>{
          me.seatUser.seat = seatName;
          me.loading = false;
          me.modal = false;
        }, error=>{
          me.loading = false;
        });
      }
    }
  },
  computed: {
    filteredList() {
      let query = this.query.toLowerCase();
      let selected = this.selected;
      return this.list.filter(function (user) {
        if(selected == '0' && user.confirmStatus != 'confirm') {
          return false;
        }
        if(selected != null && selected != user.checked) {
          return false;
        }
        if(query.length>0) {
          if(user.name.toLowerCase().indexOf(query)>=0) {
            return true;
          }
          if(user.phone.indexOf(query)>=0) {
            return true;
          }        
          return false;
        }
        return true;
      })
    },
    checkedCount() {
      let count = 0;
      this.list.forEach(item=>{
        if(item.checked == 1) count++;
      });
      return count + '';
    },
    uncheckedCount() {
      let count = 0;
      this.list.forEach(item=>{
        if(item.checked == 0 && item.confirmStatus=='confirm') count++;
      });
      return count + '';
    },
    blackedCount() {
      let count = 0;
      this.list.forEach(item=>{
        if(item.checked == -1) count++;
      });
      return count + '';
    }
  }
}
</script>


